<template>
    <el-aside width="200px">
        <el-menu
                router
                :default-active="this.activePath"
                text-color="#333"
                class="el-menu-vertical-demo"
        >
            <template v-for="(menu, index) of menuList">
                <el-submenu v-if="menu.meta" :key="index" :index="String(index)">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>{{ menu.meta.name }}</span>
                    </template>
                    <template v-for="(subMenu, subIndex) of menu.children">
                        <el-menu-item v-if="subMenu.meta.name" :key="index+'-'+subIndex" :index="subMenu.path">
                            {{subMenu.meta.name}}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: "Menu",
        data (){
            const { options: { routes } } = this.$router;
            return {
                menuList: routes.slice(2) || [],
                activePath: ''
            }
        },
        created() {
            this.activePath = this.$route.matched[1].path
        }
    }
</script>
